@import url('@/assets/fonts/font-awesome/font.min.css');
@import url('@/assets/fonts/bcc-iconfont/font.min.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1 {
        @apply text-2xl font-semibold;
    }
}

::-webkit-scrollbar {
    width: 7.5px;
    height: 7.5px;
    border-radius: 6px;
    visibility: hidden;
}

::-webkit-scrollbar-track {
    /* background: #58585c; */
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: #808080;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #80808080;
}

:root {
    --content-color: #1a1a1a;
    --desc-color: #888888;
    --split-color: #e5e5e5;
    --block-color: #ffffff;
    --solid-block-color: #ffffff;
    --button-color: #E4E5E6;
    --primary-color: rgb(0, 161, 214);
    --dark-button-color: rgb(233,233,233);
}

@media (prefers-color-scheme: light) {
    button, input {
        @apply hover:!brightness-95;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --content-color: rgb(233,233,233);
        --desc-color: #a2a7ae;
        --split-color: #c4c4c433;
        --block-color: #ffffff0d;
        --solid-block-color: #24292e;
        --button-color: #a2a7ae18;
    }
}

body {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

 * {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    user-select: none;
}
input {
    background: none;
    outline: none;
    border: none;
    margin: 0;
}

a {
    cursor: pointer;
    color: var(--primary-color);
}

hr {
    @apply border-none h-px my-4 bg-[var(--split-color)] flex-shrink-0;
}

img {
    -webkit-user-drag: none;
}

button, input[type='text'], input[type='password'], input[type='number'] {
    @apply relative appearance-none border-0 outline-0 h-8 rounded-lg text-sm px-2.5 py-1.5 leading-none;
    @apply bg-[color:var(--button-color)] text-[color:var(--content-color)];
    @apply hover:brightness-150 !select-none transition-[filter];
}

.checkbox {
    @apply relative flex h-4 w-4 mr-4;
    input[type='checkbox'] {
        @apply absolute appearance-none h-4 w-4 rounded-[4px];
        @apply bg-[color:var(--button-color)];
        @apply hover:brightness-150 transition !select-none;
    }
    i { 
        @apply invisible absolute pointer-events-none text-xs left-[3px] top-[0.5px];
        @apply text-[color:var(--dark-button-color)];
    }
    input[type='checkbox']:checked {
        @apply bg-[color:var(--primary-color)];
        & + i {
            @apply visible;
        }
    }
}

.tab {
    @apply flex flex-col items-start gap-1;
}

.tab button {
    @apply pr-0 w-48 flex items-center justify-end gap-2 bg-transparent;
    @apply hover:bg-[color:var(--button-color)];
    i {
        @apply w-4;
    }
    label {
        @apply w-[3px] rounded-md h-4 invisible;
    }
    &.active {
        @apply bg-[color:var(--button-color)];
        label {
            @apply visible;
        }
    }
}

button {
    @apply hover:cursor-pointer;
}

i.question {
    @apply hover:cursor-pointer hover:brightness-[85%] text-[color:var(--desc-color)];
}

i + span, span + i {
    @apply ml-2;
}

.bcc-iconfont {
	font-style: normal;
}

.ellipsis {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
    white-space: nowrap;
}

.desc {
    font-size: 14px;
    color: var(--desc-color);
    display: inline-block;
    white-space: pre-wrap;
    flex-shrink: 0;
}

.text, .text * {
    user-select: text;
}

.primary-color {
    color: var(--dark-button-color);
    background-color: var(--primary-color);
}

.Vue-Toastification__container {
    transform: translateY(10px) translateX(-4px);
    .Vue-Toastification__toast {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 14px 24px;
    }
    .Vue-Toastification__toast-body {
        font-size: 14px;
        line-height: 18px;
        white-space: pre-wrap;
        user-select: text;
    }
    .Vue-Toastification__close-button {
        font-size: 18px;
        line-height: 18px;
    }
}

markdown-style {
    @apply !bg-transparent;
    ul {
        @apply !list-disc;
    }
    a {
        @apply !text-[var(--primary-color)];
    }
}